<template>
<div class="body">
  <div class="item" >
    <div class="main" v-for="(item , i) in list" :class=" i==0?'btm': '' "  :key="i" @click="a">
      <div class="left">
      <van-icon style="color:dodgerblue" :name="item.icon">

      </van-icon>
      {{item.name}}
    </div>
    <div class="right"><van-icon name="arrow" />
    </div>
    </div>
  </div>
</div>
</template>

<script setup>
import {reactive} from "vue";
import {useRouter} from 'vue-router'
   const router=useRouter()
function a(){
 router.push('/testItem')
}
const list = reactive([
  {
    "name":"考研题库",
    "icon":"records"
  },
  {
    "name":"学校考试",
    "icon":"description"
  },
])
</script>

<style scoped lang="less">
.body{
  background-color: #f7f8fa;
  height: 100vh;
  border:1px solid transparent;
  .item{
    background-color: #ffffff;
    width: 97%;
    margin:10px auto;
    border-radius: 10px;
    box-shadow: 0 0 10px lightgray;
    height: 100px;
    .btm{
      border-bottom: 1px solid #ece9e9;
    }
    .main{
      width: 90%;
      margin: 0 auto;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      height: 50px;

    }
    .left{
      color:black;

    }


  }

}

</style>
